<template>
    <div class="forum-detail-container">
      <div class="forum-detail-wrapper">
        <!-- 左侧内容区域 -->
        <div class="left-content">
          <!-- 返回按钮 -->
          <div class="back-button" @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            <span>返回</span>
          </div>
  
          <!-- 文章内容 -->
          <div class="post-content-card" v-loading="loading">
            <div class="post-header">
              <h1 class="post-title" v-html="post.title"></h1>
              <div class="post-meta">
                <div class="post-author">
                  <img :src="post.avatar" alt="作者头像" class="author-avatar" />
                  <span class="author-name">{{ post.username }}</span>
                </div>
                <div class="post-time">{{ formatDate(post.create_time) }}</div>
              </div>
              <div class="post-tags" v-if="post.tags && post.tags.length > 0">
                <span
                  class="tag"
                  v-for="(tag, index) in post.tags"
                  :key="index"
                  >{{ tag }}</span
                >
              </div>
            </div>
  
            <div class="post-content" v-html="post.content"></div>
  
            <!-- 附件列表 -->
            <div
              class="post-files"
              v-if="post.material && post.material?.length > 0"
            >
              <h3 class="files-title">附件资料</h3>
              <div class="file-list">
                <div
                  class="file-item"
                  v-for="(file, index) in post.material"
                  :key="index"
                >
                  <div class="file-info">
                    <div class="file-name">{{ file.name }}</div>
                    <div class="file-size">
                      大小: {{ (file.size / 1024 / 1024).toFixed(2) }}MB
                    </div>
                  </div>
                  <div class="file-actions">
                    <el-button
                      type="primary"
                      size="small"
                      @click="downloadFile(file)"
                    >
                      <el-icon><Download /></el-icon>
                      下载
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- 文章底部操作栏 -->
            <!-- <div class="post-actions">
              <div class="action-item" @click="toggleLike">
                <el-icon :class="{ 'liked': isLiked }"><Star /></el-icon>
                <span>点赞 {{ post.likes }}</span>
              </div>
              <div class="action-item" @click="scrollToComments">
                <el-icon><ChatDotRound /></el-icon>
                <span>评论 {{ post.comments.length }}</span>
              </div>
              <div class="action-item" @click="sharePost">
                <el-icon><Share /></el-icon>
                <span>分享</span>
              </div>
              <div class="action-item" @click="collectPost">
                <el-icon :class="{ 'collected': isCollected }"><Collection /></el-icon>
                <span>收藏</span>
              </div>
            </div> -->
          </div>
  
          <!-- 评论区 -->
          <div class="comments-section" ref="commentsSection">
            <!-- <h2 class="section-title">评论 ({{ post.comments.length }})</h2> -->
  
            <!-- 评论输入框 -->
            <div class="comment-input-container">
              <el-input
                v-model="commentContent"
                type="textarea"
                :rows="3"
                placeholder="写下你的评论..."
                :disabled="!isLoggedIn"
              />
              <div class="comment-actions">
                <el-button
                  type="primary"
                  @click="submitComment"
                  :disabled="!isLoggedIn || !commentContent.trim()"
                >
                  发表评论
                </el-button>
                <div class="login-tip" v-if="!isLoggedIn">
                  请先
                  <span class="login-link" @click="goToLogin">登录</span> 后评论
                </div>
              </div>
            </div>
  
            <!-- 评论列表 -->
            <div class="comment-list" v-if="commentList.length > 0">
              <div
                class="comment-item"
                v-for="(comment, index) in commentList"
                :key="index"
              >
                <div class="comment-author">
                  <img
                    :src="comment.avatar"
                    alt="评论者头像"
                    class="comment-avatar"
                  />
                  <div class="comment-author-info">
                    <div class="comment-author-name">{{ comment.username }}</div>
                    <!-- <div class="comment-time">
                      {{ formatDate(comment.create_time) }}
                    </div> -->
                  </div>
                </div>
                <div class="comment-content" v-html="comment.content"></div>
                <div class="comment-actions">
                  <div class="comment-time">
                    {{ formatDate(comment.create_time) }}
                  </div>
                  <div class="action-time-l">
                    <div class="action-item" @click="replyComment(index)">
                      <img src="~@/static/comment.png" alt="回复" />
                      <span>回复</span>
                    </div>
                    <div class="action-item" @click="likeComment(index)">
                      <img src="~@/static/like.png" alt="点赞" />
                      <span>{{ comment.like || 0 }}</span>
                    </div>
                  </div>
                </div>
  
                <!-- 回复列表 -->
                <!-- <div class="reply-list" v-if="comment.replies && comment.replies.length > 0">
                  <div class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="replyIndex">
                    <div class="reply-author">
                      <img :src="reply.author.avatar" alt="回复者头像" class="reply-avatar" />
                      <div class="reply-author-info">
                        <div class="reply-author-name">{{ reply.author.name }}</div>
                        <div class="reply-time">{{ formatDate(reply.createTime) }}</div>
                      </div>
                    </div>
                    <div class="reply-content">
                      <span class="reply-to" v-if="reply.replyTo">@{{ reply.replyTo }}</span>
                      {{ reply.content }}
                    </div>
                    <div class="reply-actions">
                      <div class="action-item" @click="likeReply(index, replyIndex)">
                        <el-icon :class="{ 'liked': reply.isLiked }"><ThumbUp /></el-icon>
                        <span>{{ reply.likes || 0 }}</span>
                      </div>
                      <div class="action-item" @click="replyToReply(index, replyIndex)">
                        <el-icon><ChatLineRound /></el-icon>
                        <span>回复</span>
                      </div>
                    </div>
                  </div>
                </div> -->
  
                <!-- 回复输入框 -->
                <div class="reply-input-container" v-if="activeReplyIndex === index">
                  <el-input
                    v-model="replyContent"
                    type="textarea"
                    :rows="2"
                    :placeholder="replyPlaceholder"
                    :disabled="!isLoggedIn"
                  />
                  <div class="reply-actions">
                    <el-button size="small" @click="cancelReply">取消</el-button>
                    <el-button type="primary" size="small" @click="submitReply" :disabled="!isLoggedIn || !replyContent.trim()">
                      回复
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- 无评论提示 -->
            <div class="no-comments" v-else>暂无评论，快来发表第一条评论吧！</div>
          </div>
        </div>
  
        <!-- 右侧内容区域 -->
        <div class="right-content">
          <!-- 作者信息卡片 -->
          <!-- <div class="author-card">
            <div class="author-header">
              <img :src="post.author.avatar" alt="作者头像" class="author-avatar-large" />
              <div class="author-name-large">{{ post.author.name }}</div>
              <div class="author-bio">{{ post.author.bio || '这个人很懒，什么都没留下' }}</div>
            </div>
            <div class="author-stats">
              <div class="stat-item">
                <div class="stat-value">{{ post.author.posts }}</div>
                <div class="stat-label">发帖</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ post.author.followers }}</div>
                <div class="stat-label">粉丝</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ post.author.following }}</div>
                <div class="stat-label">关注</div>
              </div>
            </div>
            <div class="author-actions">
              <el-button 
                type="primary" 
                :plain="!isFollowing" 
                @click="toggleFollow"
              >
                {{ isFollowing ? '已关注' : '关注' }}
              </el-button>
              <el-button @click="sendMessage">发消息</el-button>
            </div>
          </div> -->
  
          <!-- 相关推荐 -->
          <div class="related-posts">
            <h3 class="section-title">相关推荐</h3>
            <div class="related-post-list">
              <div
                class="related-post-item"
                v-for="(item, index) in relatedPosts"
                :key="index"
                @click="goToPost(item.id)"
              >
                <div class="related-post-title">{{ item.title }}</div>
                <div class="related-post-meta">
                  <span>{{ formatDate(item.createTime) }}</span>
                  <span>{{ item.views }} 浏览</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import { ref, onMounted, nextTick } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import {
    ArrowLeft,
    Star,
    ChatDotRound,
    Share,
    Collection,
    Download,
    // ThumbUp,
    ChatLineRound,
  } from "@element-plus/icons-vue";
  //   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  import dayjs from "dayjs";
  import { ElMessage, ElLoading } from "element-plus";
  import {
    handleForumDetail,
    handleForumLike,
    handleForumComment,
    handleForumCommentList,
    handleForumList,
  } from "../../service/forum";
  
  const router = useRouter();
  const route = useRoute();
  
  // 评论区域引用
  const commentsSection = ref(null);
  
  // 用户状态
  const isLoggedIn = ref(true); // 模拟用户已登录状态
  const isLiked = ref(false);
  const isCollected = ref(false);
  const isFollowing = ref(false);
  
  // 评论相关
  const commentContent = ref("");
  const replyContent = ref("");
  const activeReplyIndex = ref(-1);
  const activeReplyToIndex = ref(-1);
  const replyPlaceholder = ref("写下你的回复...");
  
  // 帖子数据
  const post = ref({});
  
  // 相关推荐
  const relatedPosts = ref([]);
  
  const commentList = ref([]);
  
  // 加载状态
  const loading = ref(false);
  
  // 返回上一页
  const goBack = () => {
    router.back();
  };
  
  const formatDate = (date) => {
    return dayjs(date * 1000).format("YYYY-MM-DD");
  };
  
  // 获取帖子详情
  const getForumDetail = async () => {
    const postId = router.currentRoute.value.params.id;
    if (!postId) {
      ElMessage.error("帖子ID不存在");
      router.push("/forum");
      return;
    }
  
    loading.value = true;
  
    try {
      const res = await handleForumDetail({ id: postId });
      if (res.code === "000000") {
        loading.value = false;
        console;
        const data = res.data;
        post.value = data;
  
        // // 获取评论列表
        getCommentList(postId);
  
        // // 获取相关推荐
        // getRelatedPosts(data.type);
      } else {
        ElMessage.error(res.msg || "获取帖子详情失败");
        // router.push('/forum');
      }
    } catch (error) {
      console.error("获取帖子详情出错：", error);
      ElMessage.error("获取帖子详情出错，请重试");
    } finally {
      loading.value = false;
    }
  };
  
  // 获取评论列表
  const getCommentList = async (postId) => {
    try {
      const res = await handleForumCommentList({ logid: postId, type: 1 });
      if (res.code === "000000") {
        commentList.value = res.data || [];
      } else {
        console.error("获取评论列表失败：", res.msg);
      }
    } catch (error) {
      console.error("获取评论列表出错：", error);
    }
  };
  
  // 获取相关推荐
  const getRelatedPosts = async (type) => {
    try {
      const res = await handleForumList({ type, rows: 4 });
      if (res.code === 200) {
        // 过滤掉当前帖子
        relatedPosts.value = (res.data.list || [])
          .filter((item) => item.id !== post.value.id)
          .slice(0, 4)
          .map((item) => ({
            id: item.id,
            title: item.title,
            createTime: item.createTime,
            views: item.views || 0,
          }));
      }
    } catch (error) {
      console.error("获取相关推荐出错：", error);
    }
  };
  
  // 点赞帖子
  const toggleLike = async () => {
    if (!isLoggedIn.value) {
      ElMessage.warning("请先登录后再操作");
      return;
    }
  
    try {
      const res = await handleForumLike({
        postId: post.value.id,
        type: 0, // 帖子点赞
      });
  
      if (res.code === 200) {
        isLiked.value = !isLiked.value;
        if (isLiked.value) {
          post.value.likes++;
          ElMessage.success("点赞成功");
        } else {
          post.value.likes--;
          ElMessage.info("已取消点赞");
        }
      } else {
        ElMessage.error(res.msg || "操作失败");
      }
    } catch (error) {
      console.error("点赞操作出错：", error);
      ElMessage.error("操作失败，请重试");
    }
  };
  
  // 收藏帖子
  const collectPost = () => {
    if (!isLoggedIn.value) {
      ElMessage.warning("请先登录后再操作");
      return;
    }
  
    isCollected.value = !isCollected.value;
    if (isCollected.value) {
      ElMessage.success("收藏成功");
    } else {
      ElMessage.info("已取消收藏");
    }
  };
  
  // 分享帖子
  const sharePost = () => {
    // 复制链接到剪贴板
    const url = window.location.href;
    navigator.clipboard
      .writeText(url)
      .then(() => {
        ElMessage.success("链接已复制到剪贴板");
      })
      .catch(() => {
        ElMessage.error("复制失败，请手动复制");
      });
  };
  
  // 关注作者
  const toggleFollow = () => {
    if (!isLoggedIn.value) {
      ElMessage.warning("请先登录后再操作");
      return;
    }
  
    isFollowing.value = !isFollowing.value;
    if (isFollowing.value) {
      post.value.author.followers++;
      ElMessage.success("关注成功");
    } else {
      post.value.author.followers--;
      ElMessage.info("已取消关注");
    }
  };
  
  // 发送私信
  const sendMessage = () => {
    if (!isLoggedIn.value) {
      ElMessage.warning("请先登录后再操作");
      return;
    }
  
    ElMessage.success("私信功能开发中，敬请期待");
  };
  
  // 下载文件
  const downloadFile = (file) => {
    ElMessage.success(`开始下载: ${file.name}`);
    // 实际下载逻辑
    window.open(file.url, "_blank");
  };
  
  // 滚动到评论区
  const scrollToComments = () => {
    nextTick(() => {
      if (commentsSection.value) {
        commentsSection.value.scrollIntoView({ behavior: "smooth" });
      }
    });
  };
  
  // 提交评论
  const submitComment = async () => {
    if (!isLoggedIn.value) {
      ElMessage.warning("请先登录后再操作");
      return;
    }
  
    if (!commentContent.value.trim()) {
      ElMessage.warning("评论内容不能为空");
      return;
    }
  
    try {
      const res = await handleForumComment({
        logid: post.value.id,
        content: commentContent.value,
        pid: 0, // 顶级评论
        subject: post.value.type,
        type: 1,
      });
  
      if (res.code === "000000") {
        ElMessage.success("评论发表成功");
        // 评论成功后刷新评论列表
        getCommentList(post.value.id);
        // // 清空评论框
        // commentContent.value = '';
        // ElMessage.success('评论发表成功');
      } else {
        ElMessage.error(res.msg || "评论发表失败");
      }
    } catch (error) {
      console.error("评论发表出错：", error);
      ElMessage.error("评论发表失败，请重试");
    }
  };
  
  // 点赞评论
  const likeComment = async (index) => {
    if (!isLoggedIn.value) {
      ElMessage.warning("请先登录后再操作");
      return;
    }
  
    const comment = post.value.comments[index];
  
    try {
      const res = await handleForumLike({
        commentId: comment.id,
        type: 1, // 评论点赞
      });
  
      if (res.code === 200) {
        comment.isLiked = !comment.isLiked;
  
        if (comment.isLiked) {
          comment.likes++;
        } else {
          comment.likes--;
        }
      } else {
        ElMessage.error(res.msg || "操作失败");
      }
    } catch (error) {
      console.error("点赞评论出错：", error);
      ElMessage.error("操作失败，请重试");
    }
  };
  
  // 点赞回复
  const likeReply = async (commentIndex, replyIndex) => {
    if (!isLoggedIn.value) {
      ElMessage.warning("请先登录后再操作");
      return;
    }
  
    const reply = commentList.value[commentIndex].replies[replyIndex];
  
    try {
      const res = await handleForumLike({
        commentId: reply.id,
        type: 1, // 评论点赞（回复也算评论）
      });
  
      if (res.code === 200) {
        reply.isLiked = !reply.isLiked;
  
        if (reply.isLiked) {
          reply.likes++;
        } else {
          reply.likes--;
        }
      } else {
        ElMessage.error(res.msg || "操作失败");
      }
    } catch (error) {
      console.error("点赞回复出错：", error);
      ElMessage.error("操作失败，请重试");
    }
  };
  
  // 回复评论
  const replyComment = (index) => {
    if (!isLoggedIn.value) {
      ElMessage.warning("请先登录后再操作");
      return;
    }
  
    activeReplyIndex.value = index;
    activeReplyToIndex.value = -1;
    replyPlaceholder.value = `回复 ${commentList.value[index].username}:`;
    replyContent.value = "";
  };
  
  // 回复其他回复
  const replyToReply = (commentIndex, replyIndex) => {
    if (!isLoggedIn.value) {
      ElMessage.warning("请先登录后再操作");
      return;
    }
  
    activeReplyIndex.value = commentIndex;
    activeReplyToIndex.value = replyIndex;
    const replyAuthor =
      post.value.comments[commentIndex].replies[replyIndex].author.name;
    replyPlaceholder.value = `回复 ${replyAuthor}:`;
    replyContent.value = "";
  };
  
  // 取消回复
  const cancelReply = () => {
    activeReplyIndex.value = -1;
    activeReplyToIndex.value = -1;
    replyContent.value = "";
  };
  
  // 提交回复
  const submitReply = async () => {
    if (!isLoggedIn.value) {
      ElMessage.warning("请先登录后再操作");
      return;
    }
  
    if (!replyContent.value.trim()) {
      ElMessage.warning("回复内容不能为空");
      return;
    }
  
    const commentIndex = activeReplyIndex.value;
    const replyToIndex = activeReplyToIndex.value;
  
  
    let replyToName = commentList.value[commentIndex].username;
    let parentId = commentList.value[commentIndex].id;
    console.log(commentIndex, replyToIndex)
    console.log(commentList.value[commentIndex])
    console.log(parentId, 'parentId')
  
    // if (replyToIndex >= 0) {
    //   replyToName = commentList.value[commentIndex].replies[replyToIndex].username;
    // }
  
    try {
      const res = await handleForumComment({
        logid: post.value.id,
        content: replyContent.value,
        pid: parentId,
        subject: post.value.type,
        type: 1,
      });
  
      if (res.code === "000000") {
        console.log(res, 'res1111')
        // 回复成功后刷新评论列表
        // getCommentList(post.value.id);
        // // 清空回复框并关闭
        // replyContent.value = "";
        // activeReplyIndex.value = -1;
        // activeReplyToIndex.value = -1;
        // ElMessage.success("回复发表成功");
      } else {
        ElMessage.error(res.msg || "回复发表失败");
      }
    } catch (error) {
      console.error("回复发表出错：", error);
      ElMessage.error("回复发表失败，请重试");
    }
  };
  
  // 跳转到登录页
  const goToLogin = () => {
    router.push("/login");
  };
  
  // 跳转到相关帖子
  const goToPost = (postId) => {
    router.push(`/forumDetail?id=${postId}`);
  };
  
  onMounted(() => {
    // 获取帖子详情数据
    getForumDetail();
  });
  </script>
  <style scoped lang="scss">
  // 提取公共变量
  $primary-color: #126983;
  $secondary-color: #18404b;
  $text-color: #333;
  $light-text-color: #666;
  $border-color: #eee;
  $background-color: #ecf4f2;
  $card-background: #f9f9f9;
  $border-radius: 8px;
  $box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  .forum-detail-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: $background-color;
    min-height: 100vh;
  }
  
  .forum-detail-wrapper {
    width: 1200px;
    display: flex;
    gap: 20px;
  }
  
  .left-content {
    flex: 1;
    max-width: 850px;
  }
  
  .right-content {
    width: 330px;
  }
  
  .back-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 20px;
    color: $text-color;
  
    span {
      margin-left: 5px;
    }
  
    &:hover {
      color: $primary-color;
    }
  }
  
  .post-content-card {
    background-color: #fff;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .post-header {
    margin-bottom: 20px;
    border-bottom: 1px solid $border-color;
    padding-bottom: 15px;
  }
  
  .post-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
    color: $text-color;
    line-height: 1.4;
  }
  
  .post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .post-author {
    display: flex;
    align-items: center;
  
    .author-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
  
    .author-name {
      font-size: 16px;
      font-weight: 500;
      color: $text-color;
    }
  }
  
  .post-time {
    font-size: 14px;
    color: $light-text-color;
  }
  
  .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  
    .tag {
      background-color: rgba($primary-color, 0.1);
      color: $primary-color;
      padding: 4px 10px;
      border-radius: 16px;
      font-size: 12px;
    }
  }
  
  .post-content {
    font-size: 16px;
    line-height: 1.8;
    color: $text-color;
    margin-bottom: 20px;
  
    p {
      margin-bottom: 15px;
    }
  
    h3 {
      font-size: 18px;
      font-weight: 500;
      margin: 20px 0 15px;
    }
  }
  
  .post-files {
    margin-top: 30px;
    border-top: 1px solid $border-color;
    padding-top: 20px;
  }
  
  .files-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    color: $text-color;
  }
  
  .file-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: $card-background;
    border-radius: $border-radius;
    border: 1px solid $border-color;
  }
  
  .file-info {
    display: flex;
    flex-direction: column;
  }
  
  .file-name {
    font-size: 14px;
    margin-bottom: 5px;
    color: $text-color;
  }
  
  .file-size {
    font-size: 12px;
    color: $light-text-color;
  }
  
  .post-actions {
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
    border-top: 1px solid $border-color;
    margin-top: 20px;
  
    .action-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: $light-text-color;
      &:nth-child(1) {
        margin-right: 10px;
      }
      img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
  
      .el-icon {
        margin-right: 5px;
        font-size: 18px;
      }
  
      &:hover {
        color: $primary-color;
      }
  
      .liked {
        color: #f56c6c;
      }
  
      .collected {
        color: #e6a23c;
      }
    }
  }
  
  .comments-section {
    background-color: #fff;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    padding: 20px;
  }
  
  .section-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    color: $text-color;
  }
  
  .comment-input-container {
    margin-bottom: 30px;
  }
  
  .comment-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .action-time-l {
      display: flex;
      align-items: center;
    }
  }
  
  .login-tip {
    font-size: 14px;
    color: $light-text-color;
  
    .login-link {
      color: $primary-color;
      cursor: pointer;
  
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .comment-list {
    margin-top: 20px;
  }
  
  .comment-item {
    padding: 15px 0;
    border-bottom: 1px solid $border-color;
  
    &:last-child {
      border-bottom: none;
    }
  }
  
  .comment-author {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .comment-avatar {
    width: 24px;
    height: 24px;
    border-radius:4px;
    margin-right: 10px;
  }
  
  .comment-author-info {
    // display: flex;
    // flex-direction: column;
  }
  
  .comment-author-name {
    font-size: 14px;
    font-weight: 600;
    color: $text-color;
  }
  
  .comment-time {
    font-size: 12px;
    color: $light-text-color;
    margin-top: 3px;
  }
  
  .comment-content {
    font-size: 14px;
    color: $text-color;
    padding-left: 34px;
  }
  
  .comment-actions {
    display: flex;
    padding-left: 34px;
  
    .action-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: $light-text-color;
      font-size: 14px;
      &:nth-child(1) {
        margin-right: 10px;
      }
      img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
  
      .el-icon {
        margin-right: 5px;
        font-size: 16px;
      }
  
      &:hover {
        color: $primary-color;
      }
  
      .liked {
        color: #f56c6c;
      }
    }
  }
  
  .reply-list {
    margin-top: 15px;
    padding-left: 50px;
  }
  
  .reply-item {
    background-color: $card-background;
    border-radius: $border-radius;
    padding: 15px;
    margin-bottom: 10px;
  
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .reply-author {
    display: flex;
    margin-bottom: 10px;
  }
  
  .reply-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .reply-author-info {
    display: flex;
    flex-direction: column;
  }
  
  .reply-author-name {
    font-size: 14px;
    font-weight: 500;
    color: $text-color;
  }
  
  .reply-time {
    font-size: 12px;
    color: $light-text-color;
    margin-top: 3px;
  }
  
  .reply-content {
    font-size: 14px;
    line-height: 1.6;
    color: $text-color;
    margin: 10px 0;
  
    .reply-to {
      color: $primary-color;
      margin-right: 5px;
    }
  }
  
  .reply-actions {
    display: flex;
    gap: 15px;
  
    .action-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: $light-text-color;
      font-size: 12px;
      &:nth-child(1) {
        margin-right: 10px;
      }
      img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
  
      .el-icon {
        margin-right: 5px;
        font-size: 14px;
      }
  
      &:hover {
        color: $primary-color;
      }
  
      .liked {
        color: #f56c6c;
      }
    }
  }
  
  .reply-input-container {
    margin-top: 15px;
    padding-left: 34px;
  
    .reply-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 10px;
    }
  }
  
  .no-comments {
    text-align: center;
    padding: 30px 0;
    color: $light-text-color;
    font-size: 14px;
  }
  
  .author-card {
    background-color: #fff;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .author-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .author-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
  }
  
  .author-name-large {
    font-size: 18px;
    font-weight: 500;
    color: $text-color;
    margin-bottom: 10px;
  }
  
  .author-bio {
    font-size: 14px;
    color: $light-text-color;
    line-height: 1.5;
  }
  
  .author-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    padding: 15px 0;
  }
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .stat-value {
    font-size: 18px;
    font-weight: 500;
    color: $text-color;
  }
  
  .stat-label {
    font-size: 12px;
    color: $light-text-color;
    margin-top: 5px;
  }
  
  .author-actions {
    display: flex;
    gap: 10px;
  
    .el-button {
      flex: 1;
    }
  }
  
  .related-posts {
    background-color: #fff;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    padding: 20px;
  }
  
  .related-post-list {
    margin-top: 15px;
  }
  
  .related-post-item {
    padding: 10px 0;
    border-bottom: 1px solid $border-color;
    cursor: pointer;
  
    &:last-child {
      border-bottom: none;
    }
  
    &:hover {
      .related-post-title {
        color: $primary-color;
      }
    }
  }
  
  .related-post-title {
    font-size: 14px;
    color: $text-color;
    margin-bottom: 5px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .related-post-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: $light-text-color;
  }
  
  // 响应式调整
  @media (max-width: 1200px) {
    .forum-detail-wrapper {
      width: 100%;
      flex-direction: column;
    }
  
    .left-content {
      max-width: 100%;
    }
  
    .right-content {
      width: 100%;
    }
  
    .file-list {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 768px) {
    .post-meta {
      flex-direction: column;
      align-items: flex-start;
  
      .post-time {
        margin-top: 5px;
      }
    }
  
    .post-actions {
      flex-wrap: wrap;
      gap: 15px;
    }
  
    .comment-content,
    .comment-actions,
    .reply-list {
      padding-left: 0;
    }
  
    .reply-input-container {
      padding-left: 0;
    }
  }
  </style>